<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RoleRealm - 登录</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        /* Inline page styles preserved from template */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'PingFang SC', 'Inter', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
        body { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
        .header { padding: 20px 0; text-align: center; }
        .logo { color: white; font-size: 32px; font-weight: bold; margin-bottom: 8px; }
        .tagline { color: #e5e7eb; font-size: 16px; }
        .nav-links { margin-top: 20px; }
        .nav-links a { color: #e5e7eb; text-decoration: none; margin: 0 15px; font-size: 14px; }
        .nav-links a:hover { color: #f59e0b; }
        .main-content { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }
        .login-container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
        .login-title { color: white; font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 30px; }
        .form-group { margin-bottom: 20px; }
        .form-label { color: #e5e7eb; font-size: 14px; margin-bottom: 8px; display: block; }
        .form-input { width: 100%; padding: 12px 16px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: white; font-size: 16px; transition: all 0.3s ease; }
        .form-input::placeholder { color: #9ca3af; }
        .form-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }
        .forgot-password { text-align: right; margin-bottom: 20px; }
        .forgot-password a { color: #f59e0b; text-decoration: none; font-size: 14px; }
        .login-btn { width: 100%; padding: 14px; background: #f59e0b; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin-bottom: 20px; }
        .login-btn:hover { background: #d97706; transform: translateY(-2px); }
        .login-btn:active { transform: translateY(0); }
        .register-link { text-align: center; color: #e5e7eb; font-size: 14px; }
        .register-link a { color: #f59e0b; text-decoration: none; font-weight: bold; }
        .footer { text-align: center; padding: 20px; color: #9ca3af; font-size: 14px; }
        .loading { display: none; text-align: center; color: #f59e0b; margin-top: 10px; }
        .spinner { border: 2px solid rgba(245, 158, 11, 0.3); border-top: 2px solid #f59e0b; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; margin-right: 10px; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .error-message { color: #ef4444; font-size: 12px; margin-top: 5px; display: none; }
        @media (max-width: 768px) { .login-container { margin: 20px; padding: 30px 20px; } .logo { font-size: 24px; } .tagline { font-size: 14px; } }
    </style>
    <script src="/js/api.js"></script>
    <script src="/js/auth.js"></script>
    <script>
      // Redirect if already logged in
      (function(){
        if (ApiClient.getToken()) {
          const params = new URLSearchParams(location.search);
          const redirect = params.get('redirect') || '/character-selection.html';
          location.replace(redirect);
        }
      })();
    </script>
  </head>
<body>
    <header class="header">
        <div class="logo">RoleRealm</div>
        <div class="tagline">与历史人物对话，体验沉浸式角色扮演</div>
        <nav class="nav-links">
            <a href="/register.html">注册</a>
            <a href="#about">关于我们</a>
            <a href="#help">帮助</a>
        </nav>
    </header>

    <main class="main-content">
        <div class="login-container">
            <h1 class="login-title">登录</h1>
            <form id="loginForm">
                <div class="form-group">
                    <label class="form-label" for="principal">邮箱/手机号/用户名</label>
                    <input type="text" id="principal" class="form-input" placeholder="请输入邮箱、手机号或用户名" required>
                    <div class="error-message" id="principalError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="password">密码</label>
                    <input type="password" id="password" class="form-input" placeholder="请输入密码" required>
                    <div class="error-message" id="passwordError"></div>
                </div>
                <div class="forgot-password"><a href="#forgot">忘记密码？</a></div>
                <button type="submit" class="login-btn" id="loginBtn">登录</button>
                <div class="loading" id="loading"><span class="spinner"></span>正在登录...</div>
                <div class="error-message" id="formError" style="display:none;text-align:center"></div>
            </form>
            <div class="register-link">还没有账号？<a href="/register.html">立即注册</a></div>
        </div>
    </main>

    <footer class="footer">技术支持：support@rolerealm.com</footer>

    <script>
      const form = document.getElementById('loginForm');
      const loading = document.getElementById('loading');
      const btn = document.getElementById('loginBtn');
      const formError = document.getElementById('formError');
      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        formError.style.display = 'none';
        const principal = document.getElementById('principal').value.trim();
        const password = document.getElementById('password').value;
        if (!principal || !password) return;
        loading.style.display = 'block';
        btn.style.display = 'none';
        try {
          const data = await UsersApi.login(principal, password);
          ApiClient.setToken(data.token);
          if (data.user) ApiClient.setUser(data.user);
          const params = new URLSearchParams(location.search);
          const redirect = params.get('redirect') || '/character-selection.html';
          location.href = redirect;
        } catch (err) {
          formError.textContent = err.message || '登录失败，请重试';
          formError.style.display = 'block';
        } finally {
          loading.style.display = 'none';
          btn.style.display = 'block';
        }
      });
    </script>
</body>
</html>


